<template>
  <div class="login">
    <k-header headTitle="登录" goBack="true" rightTitle="axios" @rightClick="axIos"></k-header>
    <tab style="margin-top: 46px">
      <tab-item selected>你好</tab-item>
      <tab-item>你好</tab-item>
      <tab-item>你好</tab-item>
    </tab>
    <scroller
      class="my-scroller"
      :on-refresh="refresh"
      refreshText="拼命加载中"
      :on-infinite="infinite"
      ref="stop"
    >

      <swiper :list="swiperList" :loop="true" :auto="true" :interval="5000">

      </swiper>
      <marquee class="my-marquee">
        <marquee-item>111</marquee-item>
        <marquee-item>222</marquee-item>
        <marquee-item>333</marquee-item>
        <marquee-item>444</marquee-item>
      </marquee>
      <panel :list="dataList">

      </panel>
    </scroller>

  </div>
</template>

<script>
  import kHeader from '../common/head'
  import util from '../../libs/util'
  import { Tab, TabItem, Swiper, Marquee, MarqueeItem, Panel  } from 'vux'
    export default {
        data () {
          var datalist = [];
          for(var i=0;i<10;i++){
            datalist.push({
              src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
              title: '标题一',
              desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
              url: '/component/cell'
            })
          }
            return {
              swiperList:[{
                url: 'javascript:',
                img: 'https://static.vux.li/demo/1.jpg',
                title: '送你一朵fua'
              }, {
                url: 'javascript:',
                img: 'https://static.vux.li/demo/2.jpg',
                title: '送你一辆车'
              }, {
                url: 'javascript:',
                img: 'https://static.vux.li/demo/3.jpg',
                title: '送你一次旅行'
              }],
              dataList: datalist

            }
        },
      components:{
        kHeader,
        Tab,
        TabItem,
        Swiper,
        Marquee,
        MarqueeItem,
        Panel
      },
      methods:{
        axIos(){
          var url = '/lblsapp-h5/h5/index/queryBannerList.json';
          let data = {mobile:'13000000000',smsCode:'8888'}
          util.ajax.post(url, data).then(function(data){
            console.log(data)
          }).catch(function(error){
            console.log(error)
          })
        },
        refresh(){
//         alert('下拉刷新')
//          this.$refs.stop.finishPullToRefresh()
        },
        infinite(){
          console.log(2)
        }
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .my-marquee{
    margin-top: 20px;
  }
  .my-scroller{
    margin-top: 90px;
  }
  .loading-layer{
   height: 90px;
  }
</style>
